*{margin: 0; padding: 0; box-sizing: border-box; }
*::before,*::after{box-sizing: border-box; }
@keyframes circle{0% {transform: rotate(0deg); } 100% {transform: rotate(360deg); } }


.page{display: flex; flex-direction: column; height: 100vh; background:white; }


.disc-container{position: relative; }
.disc-container .pointer{width: 24vw; position: absolute; left: 50%; transform: translate(-10%,0); }
.disc-container .disc{display: flex; justify-content: center; align-items: center; margin-top: 17vw; }
.disc-container .pause{width: 15vw; position: absolute; /*z-index: 10;*/ }
.disc-container .ring{width: 72vw; }
.disc-container .light{width: 72vw; position: absolute; }
.disc-container .cover{width: 45vw; position: absolute; border-radius: 50%; animation: circle 20s infinite linear; animation-play-state: paused; }
.disc-container.playing .light,
.disc-container.playing .cover{animation-play-state: running; }


.song-description{flex-grow: 1; color: #333333; text-align: center; line-height: 2; margin-top: 20px; }
.song-description h1{font-size: 18px; }
.song-description p{font-size: 14px; line-height: 24px; }
.song-description .lyric{height: 76px; overflow: hidden; }
.song-description{transition: transform 0.3s; }
.song-description p.active{color: white; font-size: 1.1em }


.page > .links{display: flex; justify-content: center; align-items: center; color: #D43832; }
.page > .links > a{width: 38.5vw; margin: 1em; text-align: center; border: 1px solid #D43832; background: transparent; padding: 1.5vw; color: inherit; text-decoration: none; border-radius: 5vw; letter-spacing: 1vw; }
.page > .links > a.main{background: #D43832; color: white; }